<template>
    <div class="section_common">

        <div class="main">
            <el-form label-width="100px" >
                <el-form-item label="申请人" required>
                    <el-input  v-model="applyerUser" size="mini" readonly></el-input>
                </el-form-item>
                <el-form-item label="计划类型" required>
                    <el-input v-model="planType" size="mini" readonly></el-input>
                </el-form-item>
                <el-form-item label="培训目的"  required>
                    <el-input type="textarea" v-model="trainPurpose" size="mini" readonly></el-input>
                </el-form-item>
                <el-form-item label="培训类别" required>
                    <el-input v-model="trainType" size="mini" readonly></el-input>
                </el-form-item>
                <el-form-item label="培训讲师"  >
                    <el-input v-model="trainTeacher" size="mini" readonly></el-input>
                </el-form-item>
                <el-form-item label="培训预算申请" required>
                    <el-input type="number" v-model="trainBudget" size="mini" readonly></el-input>
                </el-form-item>
                <el-form-item label="附件">
                    <div>
                        <span><a target="_blank" :href="this.fileUrl" style="color: black;text-decoration: none;background-color: white">{{this.fileName}}(可点击下载查看)</a></span>
                    </div>
                </el-form-item>

                <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
                    <van-step v-show="oneShow">
                        <h3>审批人：</h3>
                        <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="twoShow">
                        <van-image v-for="(item,index) in twoLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="threeShow">
                        <van-image v-for="(item,index) in threeLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="fourShow">
                        <van-image v-for="(item,index) in fourLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>

                    <van-step v-show="csShow">
                        <h3>抄送人：</h3>
                        <van-image v-for="(item,index) in csLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                </van-steps>
                <el-form-item>
                    <el-button id="isBack" v-show="isBackBtn" v-bind:disabled="isShowBack" type="warning" size="mini" @click="backout">撤销</el-button>
                    <el-button id="isAgree" v-show="isAgreeBtn" v-bind:disabled="isShow" type="primary" size="mini" @click="submitAgree">{{message}}</el-button>
                    <el-button id="isNotAgree" v-show="isAgreeBtn" v-bind:disabled="isShow" type="warning" size="mini" @click="submitNotAgree">{{message1}}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {Image as VanImage,Toast} from "vant";
    import Vue from "vue";
    Vue.use(VanImage);

    export default {
        data() {
            return {
                loading: false,
                active: -1,
                oneShow:false,//审批是否显示
                oneLd:[],
                twoShow:false,
                twoLd:[],
                threeShow:false,
                threeLd:[],
                fourShow:false,
                fourLd:[],
                csShow:false,
                csLd:[],

                applyerUser:'',
                planType: '',
                trainPurpose:'',
                trainType: '',
                trainTeacher: '',
                trainTeachers:[],
                trainBudget: '',
                list: [],
                flag:false,
                isShow:false,
                message:'通过',
                message1:'驳回',
                isAgreeBtn:false,
                bhreason:"驳回",

                isBackBtn:false,
                isShowBack:false,


                id: this.$route.params.id,
                nowUser: JSON.parse(localStorage.getItem('userInfo')).userId,
                fileList: [{fileId:""}],
                fileName:"",
                fileUrl:"",
            }
        },
        created() {
            //判断是否是培训专员
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            if (userInfo.roleId.indexOf('1428543702766260226') !== -1){
                this.flag = true;
            }
            //上级审批人
            this.selSpLeaderByNowUserById();
            //获取培训计划页面详情
            this.getTraPlanDetail();
        },
        methods: {
            //获取培训计划页面详情
            getTraPlanDetail(){
                this.$https.post('/mobiles/getTraPlanDetail', {
                    id: this.id,
                    approver: this.nowUser, //审批用户（判断是培训专员还是其他人、上级领导）
                    type: this.flag === true ? "1" : "2"

                }).then(res => {
                    console.log(res.data)
                    this.planType = res.data.data.traPlan.planType;
                    this.trainPurpose = res.data.data.traPlan.trainPurpose;
                    this.trainType = res.data.data.traPlan.trainType;
                    this.trainTeacher = res.data.data.traPlan.trainTeacher;
                    this.trainBudget = res.data.data.traPlan.trainBudget;

                    this.applyerUser = res.data.data.applyerUser;
                    //附件回显
                    this.fileUrl = res.data.data.filePath;
                    this.fileName = res.data.data.fileName;

                    if (res.data.data.agreeBtn){
                        this.isAgreeBtn = true
                        if (res.data.data.agree=='已通过'){
                            this.message='已通过';
                            this.isShow=true;
                        }else if (res.data.data.agree=='已驳回'){
                            this.message1='已驳回';
                            this.isShow=true;
                        }else {
                            if (res.data.data.showAgree=="0"){
                                this.message='已通过';
                                this.isShow=true;
                            }
                        }
                    }else {
                        this.isAgreeBtn = false
                    }
                    if (res.data.data.backBtn){
                        this.isBackBtn = true;
                        if (res.data.data.agree=='已撤销'){
                            this.isShowBack = true;
                        }else {
                            this.isShowBack = false;
                        }
                    }else {
                        this.isBackBtn = false;
                    }
                    this.active=res.data.data.traPlan.state-1;


                }).catch(err => {
                    console.log(err);
                })
            },
            //根据申请人的id找到对应的审批人
            selSpLeaderByNowUserById(){
                this.$https.post('/mobiles/getTrainPlanSpLeaderById', {
                    id:this.id,
                    type: this.flag === true ? "1" : "2"
                }).then((res)=>{
                    console.log(res)

                    if (res.data.data.csspusers.length>0){
                        this.csShow=true;
                        this.csLd=res.data.data.csspusers;
                    }else {
                        this.csShow=false;
                        this.csLd=[];
                    }
                    if (res.data.data.onespusers.length>0){
                        this.oneShow=true;
                        this.oneLd=res.data.data.onespusers;
                    }else {
                        this.oneShow=false;
                        this.oneLd=[];
                    }
                    if (res.data.data.twospusers.length>0){
                        this.twoShow=true;
                        this.twoLd=res.data.data.twospusers;
                    }else {
                        this.twoShow=false;
                        this.twoLd=[];
                    }
                    if (res.data.data.threespusers.length>0){
                        this.threeShow=true;
                        this.threeLd=res.data.data.threespusers;
                    }else {
                        this.threeShow=false;
                        this.threeLd=[];
                    }
                    if (res.data.data.fourspusers.length>0){
                        this.fourShow=true;
                        this.fourLd=res.data.data.fourspusers;
                    }else {
                        this.fourShow=false;
                        this.fourLd=[];
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // 提交同意
            submitAgree() {
                this.isShow=true;
                this.$https.post('/mobiles/isAgreePlan', {
                    id: this.id,
                    approver: this.nowUser, //审批用户
                    type: this.flag === true ? "1" : "2"
                }).then(res => {
                    res;
                    Toast("已通过");
                    this.message='已通过';
                    this.isShow=true;
                    this.getTraPlanDetail();//找到对应的页面详情，及领导信息

                }).catch(err => {
                    console.log(err)
                });
            },

            //驳回
            submitNotAgree() {
                // this.bhshow=true;
                this.show=false;
                this.$https.post('/mobiles/isAgreePlan', {
                    id: this.id,
                    approver: this.nowUser, //审批用户
                    bhreason:this.bhreason,
                    type: this.flag === true ? "1" : "2"
                }).then(res => {
                    res;
                    Toast("已驳回");
                    this.message1="已驳回";
                    this.isShow=true;
                    this.getTraPlanDetail();//找到对应的页面详情，及领导信息
                }).catch(err => {
                    console.log(err)
                });
            },
            chargeBtn(action,done){
                if (action==='cancel'){
                    done();
                }else if (action==='confirm'){
                    this.show=false;
                    this.$https.post('/mobiles/isAgreePlan', {
                        id: this.id,
                        approver: this.nowUser, //审批用户
                        bhreason:this.bhreason,
                    }).then(res => {
                        res;
                        Toast("已驳回");
                        this.message1="已驳回";
                        this.isShow=true;
                        this.getTraPlanDetail();//找到对应的页面详情，及领导信息
                        done();
                    }).catch(err => {
                        console.log(err)
                    });
                }
            },
            //撤销提出的招聘申请
            backout(){
                this.$https.post('/mobiles/planDeatilBackout', {
                    nowUser:this.nowUser,
                    id:this.id,
                }).then((res) => {
                    Toast(res.data.message);
                    this.getTraPlanDetail();//找到对应的页面详情，及领导信息

                }).catch(err => {
                    console.log(err)
                });
            },
            go() {
                this.$router.go(-1)
            },
            //监听上传变动
            afterRead() {
                let formData = new FormData();
                var fs=this.$refs.inputer.files;
                for (let i = 0; i < fs.length; i++) {
                    formData.append("fileList", fs[i]);  //文件上传处理
                }
                this.$https.post('/mobiles/uploadFile',formData,{
                    timeout: 0, //无超时时间
                    headers: { "Content-Type": "multipart/form-data" }
                }).then(res => {
                    console.log(res)
                    this.fileList=res.data.data;
                    this.fileName=this.fileList[this.fileList.length-1].fileName;
                    this.fileUrl=this.fileList[this.fileList.length-1].filePath;
                    Toast("上传完成");
                }).catch(err => {
                    console.log(err);
                })
            },
        },
        beforeRouteLeave(to, from, next) {
            to.params.activeName = '培训管理';
            next();
        },
    };
</script>

<style lang="scss" scoped>
    .main {
        background-color: white;

        .el-form {
            padding-right: 10px;

            .el-form-item {
                .el-form-item__label {
                    line-height: 16px;
                }

                margin-bottom: 20px;
            }
        }
    }
</style>
